
<template>
  <!-- 导入 -->
  <basic-container>
    <!-- table 展示  -->
    <div class="title">导入</div>
    <div class="import-container">
      <div class="import-file">{{record.filename || ''}}</div>
      <el-upload
        style="display: inline-block; margin-right: 20px"
        :ref="`upload`"
        action="/"
        :auto-upload="false"
        :on-change="(file) => handleChange(file)"
        :disabled="uploading"
      >
        <el-button
          slot="trigger"
          type="text"
          size="small"
        >选择文件</el-button>
      </el-upload>
      <el-button
        @click="handleDownloadClick(1)"
        type="text"
        size="small"
      >正常情况退票导出模板</el-button>
      <el-button
        @click="handleDownloadClick(2)"
        type="text"
        size="small"
      >特殊情况退票导出模板</el-button>
    </div>
    <div style="text-align: center; margin: 40px">
      <el-button
        :loading="uploading"
        @click="handleCancel"
      >取 消</el-button>
      <el-button
        :loading="uploading"
        type="primary"
        @click="handleUpload"
      >上传</el-button>
      <el-button
        :loading="uploading"
        @click="$emit('close')"
      >返回</el-button>
    </div>
  </basic-container>
</template>

<script>
import { fetchList, exportTamplate,exportTamplateNormal,exportTamplateSpecial, saveBatch, listPreview } from '@/api/rca/swckothenticketreturnlog'
import { listPreprocessing, saveBatchOk, saveBatchCancel } from '@/api/rca/swckothenticketreturn'
import { handleExcelResponse } from "@/util/util";

export default {
  name: "ImportData",
  data () {
    return {
      uploading: false,
      record: {},
      reportType: null
    };
  },
  methods: {
    handleClose () {
      this.$emit("close");
    },
    async handleCancel () {
      this.uploading = true;
      await saveBatchCancel();
      this.handleClose();
      this.uploading = false;
    },
    async handleUpload () {
      const { record } = this;
      const uploadData = record.file;
      if (!uploadData) {
        this.$message.error("请选择上传文件");
        return;
      }
      this.uploading = true;

      const formData = new FormData();
      formData.append("file", record.file, record.file.name);
      try {
        const { data } = await saveBatch(formData);
        if (data) {
          this.$message.success(`${record.file.name}上传成功`);
        }
      } catch (e) {
        this.$message.error(`${record.file.name}上传失败`);
      }
      this.uploading = false;
      this.handleUploadFinish();
    },
    handleUploadFinish () {
      this.$emit("uploadSuccess");
    },
    handleChange ({ raw: file }) {
      this.record = {
        file,
        filename: file.name
      }
      this.$refs[`upload`].clearFiles();
    },

    async handleDownloadClick (type) {
      this.reportType = type;//退换票类型 1：正常情况退票 2：特殊情况退票
      this.uploading = true;
      try {
        if(this.reportType == 1){
          debugger
          const res = await exportTamplateNormal();
          // handleExcelResponse(res, `模板.xlsx`);
          handleExcelResponse(res);
        }
        if(this.reportType == 2){
          debugger
          const res = await exportTamplateSpecial();
          // handleExcelResponse(res, `模板.xlsx`);
          handleExcelResponse(res);
        }

      } finally {
        this.uploading = false;
      }
    },

  },
};
</script>
<style lang="scss">
.rca_import_dialog {
  .import_label {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
  }
  .import_value {
    margin-bottom: 20px;
  }
}
</style>
<style scoped lang="scss">
.title {
  line-height: 30px;
  border-left: 2px solid blue;
  padding: 0 20px;
  margin-bottom: 30px;
}
.import-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.import-file {
  padding: 0 20px;
}
</style>
